<!doctype html>
<html lang="zh-CN" id="index">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="keywords" content="">
<meta name="description" content="">

<link rel="stylesheet" href="assets/amazeui-admin/css/amazeui.min.css">
<link rel="stylesheet" href="assets/amazeui-admin/css/wap.css">

<title>校园网</title>
<style>
body {
	margin: 0;
	text-align: center;
}
#clipArea {
	margin: 0px;
	height: 600px;
}
#file,
#clipBtn {
	margin: 4px;
}
#view {
	margin: 0 auto;
	width: 200px;
	height: 200px;
}



</style>
</head>
<body ontouchstart="">
	 
 <div class="pet_mian" >
    <div class="pet_head">
      <header data-am-widget="header"
          class="am-header am-header-default pet_head_block">
        <div class="am-header-left am-header-nav ">
          <a href="myUserUpdate" class="iconfont pet_head_jt_ico">&#xe913;</a>
        </div>
<div class="pet_news_list_tag_name" id="hadetext">更换头像</div>
        <div class="am-header-right am-header-nav">
  <a href="javascript:;" class="iconfont pet_head_gd_ico" id="clipBtn">&#xe7dd;</a>
        </div>
        
      </header>
      
    </div>	 
	 
	 
	 
<div id="clipArea"></div>
<!--

<input type="file" id="file">
<button id="clipBtn">截取</button>
-->

<!--
<div id="view"></div>
-->
   			  	<ul class="like_share_blocknew">
      <li ><input type="file" id="file" ></li>
     <!--     <li ><button id="clipBtn">截取并完成</button></li>-->
      </ul>
    
<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
<script src="assets/amazeui-admin/jQuery-photoClip20160516/js/iscroll-zoom.js"></script>
<script src="assets/amazeui-admin/jQuery-photoClip20160516/js/hammer.js"></script>
<script src="assets/amazeui-admin/jQuery-photoClip20160516/js/lrz.all.bundle.js"></script>
<script src="assets/amazeui-admin/jQuery-photoClip20160516/js/jquery.photoClip.js"></script>
<script>
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
	size: [260, 260],
	outputSize: [640, 640],
	file: "#file",
	view: "#view",
	ok: "#clipBtn",
	loadStart: function() {
		console.log("照片读取中");
	},
	loadComplete: function() {
		console.log("照片读取完成");
	},
	clipFinish: function(dataURL) {
		$("#hadetext").html('图片上传中...');
		console.log(dataURL);
			   
   $.ajax({
            //提交数据的类型 POST GET
            type:"POST",
            //提交的网址
            url:"myUserUpdateFace",
            //提交的数据
            data:{imginfo:dataURL},
            //返回数据的格式
            datatype: 'json',
            //在请求之前调用的函数
            beforeSend:function(){$("#msg").html("logining");},
            //成功返回之后调用的函数             
            success:function(data){
            var result = data.resultJson;
            if (result == '1'){
            	window.location.href = 'myUserUpdate';
            }
            if (result == '-1'){
            	$("#hadetext").html('头像跟换失败.');
            }
            },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
            }         
         });

  

	}
});
//clipArea.destroy();
</script>

</body>
</html>
